<template>
  <div id="reservation">
    <div id="screen">
      <div class="header">
        <div class="header-left" @click="reload()">
          <img v-if="config.HospitalConfig !== undefined" class="logo" :src="common.getLocalConfig().server + config.HospitalConfig.HospitalLogo" alt="">
        </div>
        <div class="header-right">
          <div class="data">{{day}}</div>
          <div class="time">
            <span class="item-week">{{week}}</span>
            <span class="item-time">{{time}}</span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="room">
          <span v-if="room !== undefined">{{room.Name}}</span>
        </div>
        <div class="info">
          <div class="detail">
            <div class="detail-content">
              <el-row class="active">
                <el-col :span="8" class="active-tip title">正在就诊</el-col>
                <el-col :span="16" class="active-name info-detail"><span v-if="activeQueue.Data && activeQueue.Data.CurList.length > 0">{{activeQueue.Data.CurList[0].Name}}</span></el-col>
              </el-row>
              <div class="queue">
                <div class="title">等待就诊</div>
                <div class="queue-content">
                  <template v-if="activeQueue.Data">
                    <div class="item" v-for="(item, index) in activeQueue.Data.WaitList" :key="index" :class="{'active-item': index % 4 === 1 || index % 4 === 2}">
                      <div>{{item.Name}}({{item.QueueNo}})</div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-tip">
            请其他患者在候诊区耐心等待
          </div>
        </div>
      </div>
      <div class="tip-base" v-show="showTip">
        <div class="tip-box">
          <div>请</div>
          <div class="tip-info">{{callName}}</div>
          <div>到</div>
          <div class="tip-info">{{callRoom}}</div>
          <div>就诊</div>
        </div>
      </div>
    </div>
    <div id="window" v-if="store.state.showWindow">
      <div class="line"></div>
      <div class="container">
        <div class="window-content">
          <el-row class="window-info">
            <el-col :span="8" class="window-tip">
              {{store.state.tip}}
            </el-col>
            <el-col :span="8" class="progress">
              <div class="progress" v-if="store.state.time > 0">
                <el-progress type="circle" :width="80" :percentage="store.state.time / store.state.maxTime * 100" :show-text="false" status="warning"></el-progress>
                <div class="duration">{{store.state.time}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="patient-info">
                <div class="welcome" v-if="store.state.personalInfo || store.state.patient">欢迎您,
                  <span style="font-weight:bold;" v-if="store.state.patient">{{store.state.patient.Name}}</span>
                  <span style="font-weight:bold;" v-else>{{store.state.personalInfo.name}}</span>
                  </div>
                <div class="quit" @click="home()">退出</div>
              </div>
            </el-col>
          </el-row>
          <div class="window-main">
            <router-view/>
          </div>
          <div class="window-footer">
            <div class="btn" @click="back()">
              <i class="el-icon-back"></i>
            </div>
            <div class="btn" @click="home()">
              <i class="el-icon-s-home"></i>
            </div>
            <div class="btn">
              <i class="el-icon-menu"></i>
            </div>
          </div>
        </div>
        <div class="toast" v-show="this.$store.state.showLoading">
          <div class="toast-content">
            <div class="icon">
              <i class="el-icon-loading"></i>
            </div>
              {{store.state.loadingTitle}}
            </div>
        </div>
      </div>
    </div>
        <div class="footer">
          <div class="footer-left">
            <div>
              <span>终端编号:</span>
              <span v-if="client.Entity">{{client.Entity.Code}}</span>
            </div>
            <div>
              <span>系统版本:</span>
              <span>{{version}}</span>
            </div>
          </div>
          <div class="footer-center">
            <div v-if="config.HospitalConfig">{{config.HospitalConfig.It}}</div>
            <div>CopyRight 2022</div>
          </div>
          <div class="footer-right">
            <div>
              <i style="font-size:3rem; margin-right: 1rem;" class="iconfont icon-lianxi"></i>
            </div>
            <div class="contact">
              <div class="contact-tip">有问题,请致电</div>
              <div class="phone" v-if="config.HospitalConfig">{{config.HospitalConfig.Phone}}</div>
            </div>
          </div>
        </div>
        <div class="action" v-show="!store.state.isBusy" @click="showInputCodeWindowHandler">
          输入住院号
        </div>
  </div>
</template>

<script lang="ts">

import { Component } from 'vue-property-decorator'
import { IPatient, IPersonalInfo, IQueue, IRoom } from '@/interface/common'
import { mixins } from 'vue-class-component'
import ReservationMixin from '@/mixins/reservation'
import dayjs from 'dayjs'
import { GetClientInfo, GetClientTask, GetConfig, GetServerTime, GetUser, GetUserByECode } from '@/apis/api'
import { IGetQueueListValidate, IQueueItem, IRoomQueue } from './interface/inspection'
import { GetQueueList } from './apis/inspection'
@Component
export default class extends mixins(ReservationMixin) {
  private version = '1.6.5'
  private isShow = false
  private showTip = false
  private list : IQueue[] = []
  private src = ''
  private itSrc = ''
  private day = ''
  private time = ''
  private week = ''
  private callName = ''
  private callRoom = ''
  private room: IRoom = {
    ID: '',
    Name: '',
    HisId: '',
    Code: '',
    DepartmentId: '',
    DepartmentCode: '',
    DepartmentName: '',
    CreateTime: new Date(),
    CreateBy: '',
    UpdateTime: new Date(),
    UpdateBy: ''
  }

  private async created () {
    this.updateDate()
    this.showLoading('系统启动中')
    this.logger.track('系统启动中')
    this.updateServerTime()
    this.logger.track('开始加载医院配置')
    const configResult = await GetConfig()
    if (configResult.status === 200) {
      this.config = configResult.data
      this.store.commit('updateConfig', configResult.data)
      this.logger.track('医院配置加载成功')
    } else {
      this.logger.error(`暂停服务, 医院配置加载失败${configResult.data}`)
      this.showLoading('暂停服务')
      return
    }
    this.logger.track('加载客户端配置')
    const clientResult = await GetClientInfo()
    if (clientResult.data?.Code === 200) {
      this.store.commit('updateClient', clientResult.data.Data)
      this.client = clientResult.data.Data
      this.logger.track('客户端配置加载成功')
    } else {
      this.logger.error(`暂停服务, 医院配置加载失败${clientResult.data}`)
      this.showLoading('暂停服务')
      return
    }
    // 配置文件更新到浏览器
    this.logger.track('更新客户端配置信息')
    this.showLoading('更新客户端配置信息')
    let result = this.common.setDeviceConfig(JSON.stringify(this.client))
    if (result.code === 200) {
      this.showLoading('更新客户端配置信息完成')
      this.logger.track('更新客户端配置信息完成')
    } else {
      this.logger.error(result.message)
      this.showLoading('更新客户端配置信息失败')
      setTimeout(() => {
        this.showLoading('暂停服务')
      }, 3000)
      return
    }
    // 释放DLL文件
    this.logger.info('更新驱动文件')
    this.showLoading('更新驱动文件')
    result = this.common.unZipDeviceDll()
    if (result.code === 200) {
      this.showLoading('更新驱动文件完成')
      this.logger.info('更新驱动文件完成' + result.message)
    } else {
      this.logger.error('更新驱动文件失败' + result.message)
      this.showLoading('更新驱动文件失败')
      setTimeout(() => {
        this.showLoading('暂停服务')
      }, 3000)
      return
    }
    this.hideLoading()
    setTimeout(() => {
      this.updateConfig()
    }, 60000)
    this.changeDoctor()
    this.getQueueList()
    this.taskService()
    this.readCardService()
    this.startListener()
  }

  /**
   * 扫码器监听程序
   */
  private startListener () {
    document.addEventListener('scanner_event', (event : any) => {
      const code : string = event?.detail?.code ?? ''
      const scanner = this.client.Devices.find(e => e.Name === '扫码器')
      if (scanner && this.busy === false && code.length > 5) {
        if (code.indexOf('#') > -1) {
          const arr = code.split('#')
          if (arr.length >= 2) {
            this.logger.info(`读取到住院号:${arr[1]}`)
            this.openWindowByInHosNo(arr[1])
          }
        } else {
          this.logger.info(`读取到ECode:${code}`)
          this.openWindowByEcode(code)
        }
      }
    })
  }

  // 更新服务器时间
  private async updateServerTime () {
    const result = await GetServerTime()
    if (result.data?.Code === 200) {
      this.logger.info('时间同步')
      this.common.setLocalTime(result.data.Data)
    } else {
      this.logger.error(`时间同步失败. ${result.data?.Message}`)
    }
  }

  // 更新配置文件
  private async updateConfig () {
    try {
      this.logger.track('加载客户端配置')
      const clientResult = await GetClientInfo()
      if (clientResult.data?.Code === 200) {
        this.store.commit('updateClient', clientResult.data.Data)
        this.client = clientResult.data.Data
        this.logger.track('客户端配置加载成功')
        this.logger.track('更新客户端配置信息')
        let result = this.common.setDeviceConfig(JSON.stringify(this.client))
        if (result.code === 200) {
          this.logger.track('更新客户端配置信息完成')
        } else {
          this.logger.error(result.message)
          this.showLoading('暂停服务')
          return
        }
        // 释放DLL文件
        this.logger.track('更新驱动文件')
        result = this.common.unZipDeviceDll()
        if (result.code === 200) {
          this.logger.track('更新驱动文件完成' + result.message)
        } else {
          this.logger.error('更新驱动文件完成失败' + result.message)
          this.showLoading('暂停服务')
          return
        }
      }
    } catch (error) {
      this.logger.error('更新客户端配置发生异常:' + error)
    }
    setTimeout(() => {
      this.updateConfig()
    }, 60000)
  }

  /**
   * 重载页面
   */
  private reload () {
    window.location.href = this.common.getLocalConfig().web
  }

  /**
   * 更新UI
   */
  private updateUi () {
    const queue = this.roomQueueList.find(e => e.RoomId === this.room.ID)
    if (queue) {
      if (queue.List.length > 0) {
        queue.ActiveQueue = queue.List[0]
        queue.List.shift()
      }
      this.activeQueue = queue.ActiveQueue
    } else {
      this.activeQueue = {
        ID: '',
        RoomId: '',
        Info: '',
        CreateTime: new Date()
      }
    }
  }

  // 切换医生显示
  private changeDoctor () {
    if (this.client.Rooms.length === 1) {
      this.room = this.client.Rooms[0]
      this.updateUi()
    } else if (this.client.Rooms.length > 1) {
      const index = this.client.Rooms.findIndex(e => e.ID === this.room?.ID)
      if (index < 0) {
        this.room = this.client.Rooms[0]
        this.updateUi()
      } else {
        if (index + 1 < this.client.Rooms.length) {
          this.room = this.client.Rooms[index + 1]
          this.updateUi()
        } else {
          this.room = this.client.Rooms[0]
          this.updateUi()
        }
      }
    }

    // 从服务器配置获取诊室\医生切换间隔, 默认5000
    const interval = this.config.ReservationConfig?.RotationInterval ?? 5000
    setTimeout(() => {
      this.changeDoctor()
    }, interval)
  }

  private activeQueue : IQueueItem = {
    ID: '',
    RoomId: '',
    Info: '',
    CreateTime: new Date()
  }

  private roomQueueList : IRoomQueue[] = []

  private async getQueueList () {
    try {
      for (let i = 0; i < this.client.Rooms.length; i++) {
        const element = this.client.Rooms[i]
        const query : IGetQueueListValidate = {
          RoomId: element.ID
        }
        // 查询当前诊室的队列信息, 如果没有则初始化
        let roomQueue = this.roomQueueList.find(e => e.RoomId === element.ID)
        if (roomQueue === undefined) {
          roomQueue = {
            RoomId: element.ID,
            List: [],
            ActiveQueue: {
              ID: '',
              RoomId: '',
              Info: '',
              CreateTime: new Date()
            }
          }
        }
        // 如果当前诊室已经存在队列信息, 取最后一条记录
        if (roomQueue && roomQueue.List.length > 0) {
          query.QueueId = roomQueue.List[roomQueue.List.length - 1].ID
        } else if (roomQueue && roomQueue.ActiveQueue.ID.length > 0) {
          query.QueueId = roomQueue.ActiveQueue.ID
        }
        // 从服务器获取队列信息
        const result = await GetQueueList(query)
        if (result.data?.Code === 200) {
          for (let index = 0; index < result.data.Data.length; index++) {
            const item = result.data.Data[index]
            // 判断队列是否已经存在
            if (roomQueue?.List.findIndex(e => e.ID === item.ID) === -1 && roomQueue.ActiveQueue.ID !== item.ID && dayjs(item.CreateTime).toDate() > dayjs().startOf('day').toDate()) {
              try {
                item.Data = JSON.parse(item.Info)
              } catch (error) {
                this.logger.error(`大屏队列信息解析失败, 原始数据:${item.Info}. 错误信息:${error}`)
              }
              if (item.Data && item.Data.IsCall === 1) {
                const content = `请${item.Data.CallQueueNo}号${item.Data.CallName}到${item.Data.RoomName}诊室就诊`
                this.callName = item.Data.CallName
                this.callRoom = item.Data.RoomName
                this.showTip = true
                const number = this.config.ReservationConfig?.CallNumber ?? 2
                const time = this.config.ReservationConfig?.CallTime ?? 6000
                for (let i = 0; i < number; i++) {
                  await this.play(content, time)
                }
                this.showTip = false
              }
              roomQueue.List.push(item)
            }
          }
          this.roomQueueList.push(roomQueue)
        } else {
          this.logger.error(`获取大屏队列信息发生错误. ${result.data?.Message}`)
        }
      }
    } catch (error) {
      this.logger.error('获取大屏队列发生异常:' + error)
    }
    setTimeout(() => {
      this.getQueueList()
    }, 3000)
  }

  private busy = false

  private async taskService () {
    try {
      if (!this.$store.state.isBusy) {
        const result = await GetClientTask()
        if (result.status === 200) {
          if (result.data.Code === 200) {
            switch (result.data.Data.Action) {
              case '重启':
                if (!this.$store.state.isBusy) this.common.reboot(0)
                break
              case '刷新':
                if (!this.$store.state.isBusy) window.location.href = this.common.getLocalConfig().web
                break
              case '关机':
                if (!this.$store.state.isBusy) this.common.shutDown(0)
                break
              case '关闭':
                if (!this.$store.state.isBusy) this.common.exit()
                break
              default:
                break
            }
          }
        }
      }
    } catch (error) {
      this.logger.error(`客户端任务监听服务发生错误:${error}`)
    }
    setTimeout(() => {
      this.taskService()
    }, 5000)
  }

  /**
   * 读卡服务
   */
  private async readCardService () {
    if (!this.$store.state.isBusy) {
      let result = await this.idCardReader.readCard()
      if (result && result.code === 200) {
        if (result.data) {
          if (result.data.uid.length > 0) this.logger.info(`读取到身份证UID:${result.data.uid}`)
          if (result.data.idCardNo && result.data.idCardNo.length > 0) this.logger.info(`读取到身份证信息:${result.data.name} ${result.data.idCardNo}`)
          this.openWindow(result.data)
          setTimeout(() => {
            this.readCardService()
          }, 1000)
          return
        }
      } else {
        this.logger.error(`读取身份证发生异常:${result?.message}`)
      }
      result = await this.icCardReader.readCard()
      if (result && result.code === 200) {
        if (result.data) {
          this.logger.info(`读取到社保卡信息:${result.data.name} ${result.data.idCardNo}`)
          this.openWindow(result.data)
          setTimeout(() => {
            this.readCardService()
          }, 1000)
          return
        }
      } else {
        this.logger.error(`读取社保卡发生异常:${result?.message}`)
      }
    }
    setTimeout(() => {
      this.readCardService()
    }, 1000)
  }

  private async showInputCodeWindowHandler () {
    this.store.commit('setBusy', true)
    this.store.commit('showWindow')
    this.navigateTo(`/${this.getRoute()}/input-code`)
  }

  /**
   * 打开操作屏
   */
  private async openWindow (data: IPersonalInfo) {
    this.store.commit('setBusy', true)
    this.store.commit('showWindow')
    this.store.commit('updatePersonalInfo', data)
    this.showLoading('正在加载档案信息...')
    const patient : IPatient = {
      Uid: data.uid,
      IdCardNo: data.idCardNo,
      Name: data.name,
      IcCardNo: data.icCardNo,
      Address: data.address
    }
    const result = await GetUser(patient)
    this.hideLoading()
    if (result.data?.Code === 200) {
      this.logger.info(`查询到用户建档号:${result.data.Data.CardNo}`)
      this.store.commit('updatePatient', result.data.Data)
    } else {
      this.logger.info(`未查询到用户建档信息. ${result.data?.Message ?? ''}`)
      this.$messageBox.show({
        content: `未查询到用户建档信息. ${result.data?.Message ?? ''}`,
        confirm: () => {
          this.home()
        },
        cancel: () => {
          this.home()
        }
      })
    }
    if (this.$route.path !== `/${this.getRoute()}/home`) {
      this.$router.replace(`/${this.getRoute()}/home`)
    }
  }

  /**
   * 扫码打开操作屏
   */
  private async openWindowByEcode (code: string) {
    this.store.commit('setBusy', true)
    this.store.commit('showWindow')
    this.showLoading('正在加载档案信息...')
    const result = await GetUserByECode(code)
    this.hideLoading()
    if (result.data?.Code === 200) {
      this.logger.info(`查询到用户建档号:${result.data.Data.CardNo}`)
      this.store.commit('updatePatient', result.data.Data)
    } else {
      this.logger.info(`ECode未查询到用户建档信息, 返回信息:${result.data.Message}`)
      this.$messageBox.show({
        content: '二维码过期, 请刷新重试',
        confirm: () => {
          this.home()
        },
        cancel: () => {
          this.home()
        }
      })
    }
    if (this.$route.path !== `/${this.getRoute()}/home`) {
      this.$router.replace(`/${this.getRoute()}/home`)
    }
  }

  /**
   * 住院患者打开操作屏
   */
  private async openWindowByInHosNo (code: string) {
    if (this.$route.path !== `/${this.getRoute()}/home`) {
      this.$router.replace(`/${this.getRoute()}/home`)
    }
    const patient : IPatient = {
      CardNo: code,
      Name: code
    }
    this.store.commit('updatePatient', patient)
    this.store.commit('setBusy', true)
    this.store.commit('showWindow')
    this.store.commit('updateInHosNo', code)
  }

  // 更新时间
  private updateDate () {
    this.day = dayjs().format('YYYY-MM-DD')
    this.time = dayjs().format('HH:mm:ss')
    switch (dayjs().day()) {
      case 0:
        this.week = '星期日'
        break
      case 1:
        this.week = '星期一'
        break
      case 2:
        this.week = '星期二'
        break
      case 3:
        this.week = '星期三'
        break
      case 4:
        this.week = '星期四'
        break
      case 5:
        this.week = '星期五'
        break
      case 6:
        this.week = '星期六'
        break
    }
    setTimeout(() => {
      this.updateDate()
    }, 500)
  }
}

</script>

<style>
#reservation {
  background-color: #b3cddd;
  height: 100%;
}

#window{
  height: 810px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: white;
}

.tip-base{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tip-box{
  width: 500px;
  height: 500px;
  background: #35A7FF;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 40px;
  line-height: 70px;
  margin-top: -360px;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.3);
}

.tip-info{
  color: yellow;
  font-size: 50px;
}

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  height: 100px;
}
.logo{
  height: 100px;
}
.header-right{
  font-size:30px;
  font-weight: bold;
}

.content{
  border-radius: 20px 20px 0 0;
  background-color: #3686b9;
}
.room{
  height: 150px;
  font-size: 70px;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 150px;
}
.bottom{
  height: 100px;
  font-size: 30px;
  color: white;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.soft{
  color:#B2F7EF;
  font-size: 10px;
  display: flex;
  justify-content: space-around;
}
.info{
  flex-grow: 1;
  background-image: linear-gradient(#3686b9, 20%, #6ddde7);
  display: flex;
  flex-direction: column;
}
.detail{
  flex-grow: 1;
  margin: 10px;
  border-radius: 50px;
  background-color: #b3cddd;
  display: flex;
  flex-direction: column;
}

.detail-content{
  margin: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.doctor{
  width: 100%;
  display: flex;
}

.doctor-avatar{
  height: 400px;
  background: url('~@/assets/doctor.jpg') no-repeat;
  background-size: cover;
}
.doctor-info{
  margin-left: 10px;
}
.title{
  height: 80px;
  font-size: 46px;
  color: white;
  background-color: #388cc1;;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
}
.info-detail{
  height: 80px;
  font-size: 46px;
  color: #388cc1;
  background-color: white;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
}
.active{
  display: flex;
  margin: 10px 0;
}

.active-name{
  margin-left: 10px;
}

.queue{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.queue-content{
  height: 1230px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item{
  width: 50%;
  height: 120px;
  line-height: 120px;
  font-size: 42px;
  color: #388cc1;
  font-weight: bold;
  background-color: #EFF7F6;
}

.active-item{
  background-color: #B2F7EF;
}

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.window-content{
  background-color: #F8F8F8;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.window-main{
  flex-grow: 1;
}

.footer{
  padding: 0 4rem;
  height: 6rem;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.05);
  text-align: left;
  align-items: center;
  color:gray;
}

.footer-left, .contact-tip{
  font-size: 1.2rem;
}
.phone{
  font-size: 1.8rem;
}
.footer-right{
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-center{
  text-align: center;
}
.footer-center img{
  height: 6rem;
  margin-left: 5.2rem;
}

.window-footer{
  width: 20rem;
  margin: 1rem auto;
  margin-bottom: 3rem;
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 2rem;
  align-items: center;
  padding: 1rem 2rem;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}

.btn{
  font-size: 4rem;
}

.toast{
  position: fixed;
  top: 1120px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toast-content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 30rem;
  height: 20rem;
  color: white;
  background: #3686b9;
  border-radius: 10px;
  font-size: 3rem;
  box-shadow: 0 2px 6px 3px rgba(0, 0, 0, 0.3);
}

.window-info{
  display: flex;
  height: 10rem;
  margin: 0 8rem;
  justify-content: space-between;
  align-items: center;
}

.window-tip{
  text-align: left;
  font-size: 3rem;
  color:#2c3e50;
}

.patient-info{
  display: flex;
  font-size: 2rem;
  justify-content: flex-end;
  align-items: center;
}

.quit{
  border-radius: 2rem;
  background-color: #F67665 ;
  color: white;
  padding: 1rem;
  margin-left: 1rem;
}
.line{
  width: 100%;
  height: 10px;
  background-color: #388cc1;
}
.progress{
  display: flex;
  justify-content: center;
  align-items: center;
}
.duration{
  position: absolute;
  color: #444444;
  font-size: 2.5rem;
}
.action{
  position: fixed;
  right: 0;
  bottom: 300px;
  background-color: yellow;
  font-size: 30px;
  writing-mode:vertical-lr;
  width: 80px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px 0px 0 10px;
  color: white;
  background: #35A7FF;
  box-shadow: -2px 0px 5px 1px rgba(0, 0, 0, 0.2);
}
</style>
